<template>
    <div>
        <div>
            <!-- 表单 -->
            <slot name="formSlot"></slot>
        </div>
        <div class="btnSlot">
            <!-- 按钮 -->
            <slot name="btnSlot"></slot>
        </div>
        
         <el-table
            :data="tableData"
            :stripe="stripe"
            :border="border"
            :height="height"
            style="width: 100%">
             <el-table-column type="expand" v-if="isexpand">
                <template slot-scope="props">
                    <slot 
                    name="expandBox" 
                    v-bind:row="props.row"
                    ></slot>
                </template>
             </el-table-column>

            <el-table-column
            :header-align='item.nocenter?"left":"center"'
            :align='item.nocenter?"left":"center"'
                v-for="(item,index) of headerData"
                :prop="item.prop"
                :key="index"
                :label="item.label"
                :width="item.width">
                <!-- 每个单元格都变成了插槽 -->
                <template slot-scope="scope">
                    <div v-if="!item.slot">
                        {{tableData[scope.$index][item.prop]}}
                    </div>
                    <div v-if="item.slot">
                        <slot :name="item.prop" v-bind:row="scope.row"></slot>
                    </div>
                </template>
            </el-table-column>

              <el-table-column
               header-align='center'
                fixed="right"
                v-if="isoperation"
                label="操作"
                width="200">
                <template slot-scope="scope">
                    <!-- vue插槽
                        什么时候使用vue插槽？
                        如果在子组件里面布局和功能在不同页面里面展现的是不一样的
                        我们就会使用插槽来插入到当前子组件
                        保持这个组件在其他页面不受影响
                        slot
                     -->
                     <!-- <slot name="当前插槽的名字" v-bind:传入给插槽的数据定义名="当前传入插槽的数据值"></slot> -->
                        <slot name="operationBtn" v-bind:operationData="scope.row"></slot>
                </template>
                </el-table-column>
        </el-table>

        <div>
            <el-pagination
                v-if="ispagination"
                class="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes" 
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:"supertable",
       data() {
        return {
        }
      },
      mounted(){
        let _self = this;
        for(let index in _self.tableData){
            _self.tableData[index].$index= index
        }
      },
    updated(){
        let _self = this;
        for(let index in _self.tableData){
            _self.tableData[index].$index= index
        }
      },
    methods: {
      handleSizeChange(val) {
        let _self = this;
        // console.log(`每页 ${val} 条`);
        // 子组件向父组件传值
        // $emit("发送给父组件的名字"，需要传输的数据)
        _self.$emit("SizeChange" ,val)
      },
      handleCurrentChange(val) {
        let _self = this;
        // console.log(`当前页: ${val}`);
        _self.$emit("CurrentChange" ,val)
      }
    },
    //props 子组件接收父组件传过来的值 该值就可以在该vue页面直接用
    props:{
        /*
            传入的数据的名字:{
                type:"该数据的数据类型",
                default:()=>{
                    retrn 如果父组件没有传递该数据 该数据在子组件默认是什么
                }
            }
        */
        //表格数据的名字
        tableData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        // 表头数据
        headerData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        // 操作是否显示
        isoperation:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 是否斑马纹
        stripe:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 是否显示边框
        border:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        height:{
            type:String,
            default:()=>{
                return "600px"
            }
        },
        // 是否分页
        ispagination:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 第几页
        currentPage:{
            type:Number,
            default:()=>{
                return 1
            }
        },
        // 切换一页多少条
        pageSizes:{
            type:Array,
            default:()=>{
                return [10, 20, 30, 40]
            }
        },
        total:{
            type:Number,
            default:()=>{
                return 0
            }
        },
        // 是否显示表格下拉
        isexpand:{
            type:Boolean,
            default:()=>{
                return frameElement
            }
        }
    }
}
</script>
<style scoped>
    .right{
        float: right;
    }
    .btnSlot{
        margin-bottom: 20px;
    }
</style>